<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <title>四川工商学院失物招领系统</title>
    <%@include file="../common/commHeader.html"%>
</head>
<body style="background:#EEEEEE;">
<%@include file="header.jsp"%>
<div class="col-md-10 col-md-offset-1">
    <!--头部-->
    <div class="col-md-8 laf-detail-left">
        <h3>${notice.title}</h3>
        <p>
            <fmt:formatDate value="${notice.noticeTime}" pattern="yyyy年MM月dd日" />
            发布，启事编号：${notice.noticeId}， 当前状态：
            <c:if test="${notice.type eq 0}">
                <c:if test="${notice.status eq 1}">
                    寻找物品中……
                </c:if>
                <c:if test="${notice.status eq 0}">
                    ^_^已完成
                </c:if>
            </c:if>
            <c:if test="${notice.type eq 1}">
                <c:if test="${notice.status eq 1}">
                    寻找主人中……
                </c:if>
                <c:if test="${notice.status eq 0}">
                    ^_^已完成
                </c:if>
            </c:if>
        </p>
        <p>${notice.describe}</p>
        <ul class="laf-detail-left-ul">
            <c:if test="${notice.image1 != null and fn:length(fn:trim(notice.image1))>0}">
                <li><img src="image/upload/${notice.image1}" alt=""></li>
            </c:if>
            <c:if test="${notice.image2 != null and fn:length(fn:trim(notice.image2))>0}">
                <li><img src="image/upload/${notice.image2}" alt=""></li>
            </c:if>
            <c:if test="${notice.image3 != null and fn:length(fn:trim(notice.image3))>0}">
                <li><img src="image/upload/${notice.image3}" alt=""></li>
            </c:if>
            <c:if test="${(notice.image1 == null and notice.image2 == null and notice.image3 == null) or (fn:length(fn:trim(notice.image1))==0 and fn:length(fn:trim(notice.image2))==0 and fn:length(fn:trim(notice.image3))==0)}">
                <li  style="margin-left: 25%"><img src="image/timg.jpg" alt=""></li>
            </c:if>
        </ul>
        <div class="clearfix"></div>
        <p class="laf-detail-info">
            <b>诚信，从你我做起！</b>联系时，请说是在四川工商学院失物招领平台看到的，谢谢！
            本站不欢迎利用本站发布的信息来诱骗失主，请给自己留一点自尊，也请给这个学院多一份爱心。
        </p>
        <ul id="myTab" class="nav nav-tabs">
            <li>
                <a href="#contact" data-toggle="tab">联系方式</a>
            </li>
            <li><a href="#management" data-toggle="tab">管理启事</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="contact">
                <table>
                    <tr>
                        <td>失物类别：</td>
                        <td colspan="2">${notice.cate.cateName}</td>
                    </tr>
                    <tr>
                        <td>拾获日期：</td>
                        <td colspan="2"><fmt:formatDate value="${notice.noticeTime}" pattern="yyyy年MM月dd日" /></td>
                    </tr>
                    <tr>
                        <td> 拾取地点：</td>
                        <td colspan="2">四川工商学院 > ${notice.scope.locName} > ${notice.location}</td>
                    </tr>
                    <tr>
                        <td>联系人：</td>
                        <td colspan="2">${notice.linkMan}</td>
                    </tr>
                    <tr id="tr_phone">
                        <td>电话：</td>
                        <td colspan="2">
                            ${fn:substring(notice.phone,0,3)}****${fn:substring(notice.phone,7,11)}
                        </td>
                    </tr>
                    <tr id="tr_email">
                        <td>邮箱：</td>
                        <td>
                            ${fn:substring(notice.email,0,3)}***${fn:substring(notice.email,6,(notice.email.length()))}
                        </td>
                        <td><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">点击获取完整信息</a></td>
                    </tr>
                </table>
                <c:if test="${status != null}">
                    <div id="myAlert" class="alert alert-warning" style="position: absolute;right: 0;top: 72%">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        <strong>警告！</strong>手机号码输入错误。
                    </div>
                </c:if>
            </div>
            <div class="tab-pane fade" id="management" style="color:#654F41;font-size: 12px">
                <form action="notice/manager" class="form-horizontal" role="form" id="manager">
                    <br>
                    <p>
                        <span>请输入发布信息时预留的手机号：</span>
                        <div class="laf-div">
                            <input class="form-group small" name="pwd" type="text" required pattern="\d{11}">
                            <input type="hidden" name="id" value="${notice.noticeId}">
                            <select  class=" form-group" name="op" id="op">
                                <option value="2">修改</option>
                                <option value="1">删除</option>
                            </select>
                             <input style="margin-left: 10%" class="laf-detail-btn" type="submit" value="提交">
                         </div>
                    </p>
                </form>
            </div>
        </div>
        <hr>
        <!--留言区域-->
        <div class="laf-detail-leave">
            <p>期待您的留言！</p>
            <form action="notice/leave" onsubmit="return onSubmit()" method="post">
                <input type="hidden" name="noticeId" value="${notice.noticeId}">
                <input type="hidden" name="userId" value="${logUser.userId}">
                <textarea class="form-control" name="content" id="content" rows="3" placeholder="你所说的每一句话都至关重要">
                </textarea>
                <div class="laf-detail-leave-sub">
                    <span>验证码：</span>&nbsp;&nbsp;
                    <input type="text" name="code" size="1" required pattern="\w{4}">&nbsp;&nbsp;
                    <img src="laf/code" id="codeImage" title="看不清楚？换一张" alt="验证码" style="cursor: pointer">&nbsp;&nbsp;
                    <c:if test="${param.status == 'error'}">
                        <span class="laf-tooltiptext"  style="visibility: visible;opacity: .9;margin-top:1%;margin-left: -73%"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>验证码输入错误，请重新输入！</span>
                    </c:if>
                    <input type="submit"  class="laf-detail-btn" value="留言" >
                </div>
            </form>
            <div class="laf-detail-speak">
                <p class="laf-detail-speak-tab"><span>留言区</span></p>
                <ul>
                    <c:forEach var="item" items="${leaveList}">
                        <li>
                            <span>${item.userinfo.userName}</span>说：
                            <span class="laf-detail-date"><fmt:formatDate value="${item.leaveTime}" pattern="yyyy年MM月dd日" /></span>
                            <p>${item.content}</p>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-3 laf-detail-right">
        <div class="laf-detail-right-top">
            <img src="image/important.jpg" width="100%" alt="">
            <ol>
                <%@include file="leftInfo.jsp"%>
            </ol>
        </div>
    </div>

    <div class=" col-md-3 laf-detail-right-advertising">
        <img src="image/advan.jpg" width="99%" alt="">
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">确认获取完整电话号码？</h4>
            </div>
            <div class="modal-body">如果确认获取完整的启事发布人的联系方式，将会在系统留下您的申请完整电话的信息，如不需要请取消操作</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">我再想想</button>
                <button type="button" onclick="gain()" class="btn btn-primary" data-dismiss="modal">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    function gain() {
        $.post('notice/gain',
            {
                'proposer':'${logUser.userId}',
                'noticeId':'${notice.noticeId}'
            },
            function (jsonData) {
            console.log(jsonData);
            var tr_phone_td1="<td>电话：</td>";
            var tr_phone_td2="<td colspan='2' style='color: red'>"+jsonData.phone+"</td>";
            $('#tr_phone').empty();
            $('#tr_phone').append(tr_phone_td1+tr_phone_td2);
            var tr_email_td1="<td>邮箱：</td>";
            var tr_email_td2="<td colspan='2' style='color: red'>"+jsonData.email+"</td>";
            $('#tr_email').empty();
            $('#tr_email').append(tr_email_td1+tr_email_td2);
        },'json')
    }

    function onSubmit(){
        if($('#content').val().length>0){
            return true;
        }
        return false;
    }
    $(function () {
        $('#myAlert').delay(10000).hide('fact');

        $('#content').val('');

        $('#myTab li:eq(0) a').tab('show');

        $('#codeImage').click(function () {
            var urlPath='laf/code?r='+new Date().getTime();
            document.getElementById("codeImage").src=urlPath;
        });
    });
</script>
</body>
</html>